<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!--导航栏-->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!--logo-->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand" href="#">
            <!-- <img src="img/logo.jpg" alt="首页" style="width: 40px; height: 40px;">资源共享站 -->
            资源共享站
          </a>
        </div>

        <!--导航栏上的列表-->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span>  首页<span class="sr-only"></span></a></li>
            <li><a href="#">动态</a></li>
            <li><a href="#">分享</a></li>
            <li><a href="#">更多</a></li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                <span class="glyphicon glyphicon-user"></span> 刘毓堃 <span class="caret"></span>
              </a>
              <!--用户下拉框-->
              <ul class="dropdown-menu">
                <li><a href="#">个人资料</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">退出</a></li>
              </ul>
            </li>
          </ul>
        </div>

      </div>
    </nav>

    <!--主体部分-->
    <div class="container-fluid">
      <div class="row">
        <!--侧导航栏-->
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-pills nav-stacked first-ul">
            <li role="presentation" class="active"><a href="index.html"><span class="glyphicon glyphicon-file"></span>  全部文件</a></li>
            <li role="presentation"><a href="photo.html">&nbsp;&nbsp;&nbsp;&nbsp;图片</a></li>
            <li role="presentation"><a href="table.html">&nbsp;&nbsp;&nbsp;&nbsp;文档</a></li>
            <li role="presentation"><a href="vido.html">&nbsp;&nbsp;&nbsp;&nbsp;视频</a></li>
            <li role="presentation"><a href="seed.html">&nbsp;&nbsp;&nbsp;&nbsp;种子</a></li>
            <li role="presentation"><a href="music.html">&nbsp;&nbsp;&nbsp;&nbsp;音乐</a></li>
            <li role="presentation"><a href="another.html">&nbsp;&nbsp;&nbsp;&nbsp;其他</a></li>            
          </ul>

          <ul class="nav nav-pills nav-stacked second-ul">
            <li role="presentation"><a href="myShare.html"><span class="glyphicon glyphicon-share-alt"></span>  我的分享</a></li>
            <li role="presentation disable"><a href="recycle.html"><span class="glyphicon glyphicon-trash"></span>   回收站</a></li>
          </ul>

          <div class="progress my-progress">
            <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
              <span class="sr-only">20% Complete</span>
            </div>
          </div>
          <span class="text">100G/1000G</span>
        </div>

        <!--主要内容部分-->
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <!--上传文件的一些功能-->
          <div class="row header">
            <div class="col-sm-8">
              <div class="btn-group" style="margin-top: 10px;">
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <span class="glyphicon glyphicon-upload"></span>  上传 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">上传文件</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">上传文件夹</a></li>
                </ul>
              </div>
  
              <div class="btn-group" role="group" aria-label="..." style="margin-left: 20px; margin-top: 10px;">
                <button type="button" class="btn btn-default">
                  <span class="glyphicon glyphicon-plus"></span>  新建文件夹
                </button>
              </div>
  
              <div class="btn-group" role="group" aria-label="..." style="margin-left: 20px; margin-top: 10px;">
                <button type="button" class="btn btn-default">
                  <span class="glyphicon glyphicon-download"></span>  离线下载
                </button>
              </div>
            </div>
            
            <div class="col-sm-4">
              <!--搜索框-->
              <div class="input-group" style="margin-top: 10px;">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                </span>
              </div>
            </div>
          </div>

          <!--表格上面的文字标题-->
          <div class="row text">
            <div class="col-sm-4 col-md-2"><span class="title-left">全部文件</span></div>
            <div class="col-sm-4 col-md-8"></div>
            <div class="col-sm-4 col-md-2"><span class="title-right">已全部加载，共10个</span></div>
          </div>

          <!--表格部分-->
          <div class="row table">
            <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12 tb">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>修改日期</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>文件1</td>
                    <td>-</td>
                    <td>2020-5-1 2:22</td>
                  </tr>
                  <tr>
                    <td>文件1</td>
                    <td>-</td>
                    <td>2020-5-1 2:22</td>
                  </tr>
                  <tr>
                    <td>文件1</td>
                    <td>-</td>
                    <td>2020-5-1 2:22</td>
                  </tr>
                  <tr>
                    <td>文件1</td>
                    <td>-</td>
                    <td>2020-5-1 2:22</td>
                  </tr>
                  <tr>
                    <td>文件1</td>
                    <td>-</td>
                    <td>2020-5-1 2:22</td>
                  </tr>
                  <tr>
                    <td>文件1</td>
                    <td>-</td>
                    <td>2020-5-1 2:22</td>
                  </tr>
                  <tr>
                    <td>文件1</td>
                    <td>-</td>
                    <td>2020-5-1 2:22</td>
                  </tr>
                  <tr>
                    <td>文件1</td>
                    <td>-</td>
                    <td>2020-5-1 2:22</td>
                  </tr>
                  <tr>
                    <td>文件1</td>
                    <td>-</td>
                    <td>2020-5-1 2:22</td>
                  </tr>
                  <tr>
                    <td>文件1</td>
                    <td>-</td>
                    <td>2020-5-1 2:22</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

      </div>
    </div>





    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>